<template>
	<view class="withdraw">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>提现<view class="putin" @click="upData">提现记录</view>
		</custom-navi>
		<view class="withdraw-content">
			<view class="money">168,888.00</view>
			<view class="title">可提现金额(元)</view>
			<view class="subhead">提现金额</view>
			<view class="rest">
				<view class="rest-sign">¥</view>
				<view class="rest-txt">
					<input type="text" value="" placeholder="最低提现1元" placeholder-style="font-size:28rpx; color:rgba(112,112,112,1);" />
				</view>
				<view class="rest-right" @tap="allBtn">全部</view>
			</view>
			<view class="rest" style="border-bottom: none;">
				<view class="rest-title">银行卡</view>
				<view class="rest-txt">暂无绑定银行卡</view>
				<view class="rest-right">{{operate}}</view>
			</view>
			<view class="rest" style="border-bottom: none; padding-top: 0;" v-if="genre!='1'">
				<view class="rest-title">持卡人</view>
				<view class="rest-txt">张立</view>
			</view>
		</view>
		<view class="withdraw-btn" :class="{'green':genre!='1'}" @tap="upBtn">提交申请</view>
		<uni-popup ref="popup" type="center" zindex='999'>
			<view class="modal">
				<view class='modal-head'>
					<view class="icon" @tap="closeBtn">
						<image src="/static/gerendian/guanbi.png" mode=""></image>
					</view>
					<view class="title">请输入提现密码</view>
				</view>
				<view class="modal-money">
					￥168,888,00
				</view>
				<view class="" style="width:566rpx;height:0rpx;margin: auto; border:1rpx solid rgba(231,231,231,1);opacity:1;"></view>
				<view class="modal-cost">
					<view class="title">服务费</view>
					<view class="txt">￥168.8</view>
				</view>
				<view class="modal-cost">
					<view class="title">费率</view>
					<view class="txt">0.001%(最低￥1.00)</view>
				</view>
				<view class="modal-frame">
					<validcode ref="pwd" :maxlength="6" :isPwd="true" @finish="getPwd"></validcode>
				</view>
			</view>
		</uni-popup>
		<view class="withdraw-succeed" v-if="upSucceed">
			<view class="icon">
				<image src="/static/icon/shenhe2.png" mode=""></image>
			</view>
			<view class="title">
				提现申请正等待审核
			</view>
			<view class="subhead">
				您申请的提现金额将进行扣税后转入绑定的银行账户里
				请注意查收！
			</view>
			<view class="confirmBtn" @tap="confirmBtn">确定</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				genre: '2',
				operate: '', // 绑定或更换
				upSucceed: false, // 提交成功页面是否显示
			}
		},
		onLoad() {
			if (this.genre === '1') {
				this.operate = '绑定'
			} else {
				this.operate = '更换'
			}
		},
		methods: {
			allBtn() { // 全部按钮

			},
			upData() { // 提现记录
				uni.navigateTo({
					url:'record/index'
				})
			},
			upBtn() { // 提交
				if (this.genre != '1') {
					this.$refs.popup.open()
				}
			},
			getPwd(e) { // 输入事件
				console.log(e)
				let _this = this
				this.$refs.popup.close();
				uni.showLoading({
					title: '数据提交中'
				});
				setTimeout(function() {
					uni.hideLoading();
					_this.upSucceed = true
				}, 1000);
			},
			closeBtn() { // 关闭按钮
				this.$refs.popup.close();
			},
			confirmBtn() { // 确认返回
				this.$utils.common.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.withdraw {
		height: 100vh;
		background-color: rgba(247, 247, 247, 1);
		padding: 0 32rpx;
		position: relative;

		&-succeed {
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			top: 0;
			left: 0;
			text-align: center;
			z-index: 999;
			padding: 250rpx 32rpx;

			.icon {
				width: 138rpx;
				height: 139rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(0, 144, 250, 1);
				opacity: 1;
				margin-top: 20rpx;
			}

			.subhead {
				width:576rpx;
				// height:102px;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				// line-height:32px;
				color:rgba(149,151,166,1);
				opacity:1;
				margin: auto;
				margin-top: 12rpx;
				
			}

			.confirmBtn {
				width: 686rpx;
				height: 88rpx;
				background: rgba(0, 144, 250, 1);
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 88rpx;
				color: rgba(255, 255, 255, 1);
				opacity: 1;
				margin-top: 200rpx;
			}
		}

		.modal {
			width: 678rpx;
			height: 678rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 10rpx;
			padding: 30rpx;

			&-frame {
				margin-top: 72rpx;
			}

			&-cost {
				display: flex;
				align-items: center;
				margin-top: 28rpx;
				width: 100%;
				padding: 0 20rpx;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					// line-height:38px;
					color: rgba(149, 151, 166, 1);
					opacity: 1;
				}

				.txt {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					// line-height:38px;
					color: rgba(69, 69, 69, 1);
					opacity: 1;
					margin-left: auto;
				}
			}

			&-money {
				width: 100%;
				height: 76rpx;
				font-size: 58rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 76rpx;
				color: rgba(69, 69, 69, 1);
				opacity: 1;
				// margin: auto;
				text-align: center;
				margin-top: 116rpx;
				margin-bottom: 53rpx;
			}

			&-head {
				// display: flex;
				// align-items: center;
				position: relative;
				text-align: center;
				height: 65rpx;
				line-height: 65rpx;

				.icon {
					width: 65rpx;
					height: 65rpx;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 1;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: rgba(69, 69, 69, 1);
					opacity: 1;
				}
			}
		}

		.putin {
			position: absolute;
			top: 0;
			right: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			opacity: 1;
			line-height: 44rpx;
		}

		&-modal {
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			top: 0;
			left: 0;
			z-index: 999;
		}

		&-btn {
			width: 686rpx;
			height: 88rpx;
			background: rgba(221, 221, 221, 1);
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 88rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			margin-top: 52rpx;
			opacity: 1;
		}

		.green {
			background: rgba(0, 144, 250, 1);
			color: rgba(255, 255, 255, 1);
		}

		&-content {
			width: 686rpx;

			background: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 20rpx;
			margin-top: 22rpx;

			.money {
				width: 100%;
				text-align: center;
				font-size: 64rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(3, 3, 3, 1);
				opacity: 1;
				padding-top: 60rpx;
			}

			.title {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(3, 3, 3, 1);
				opacity: 1;
				margin-top: 6rpx;
			}

			.subhead {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(3, 3, 3, 1);
				opacity: 1;
				margin-left: 32rpx;
				margin-top: 54rpx;
			}

			.rest {
				display: flex;
				align-items: center;
				padding: 28rpx 32rpx;
				margin-top: 20rpx;
				border-bottom: 2rpx solid rgba(235, 235, 235, 1);

				&-sign {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: rgba(3, 3, 3, 1);
					opacity: 1;
					margin-right: 54rpx;
				}

				&-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(3, 3, 3, 1);
					opacity: 1;
					margin-right: 52rpx;
				}

				&-txt {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(112, 112, 112, 1);
					opacity: 1;
				}

				&-right {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 144, 250, 1);
					opacity: 1;
					margin-left: auto;
				}
			}

		}
	}
</style>
